import React from "react"
import GpContainer from "@/components/GpContainer"
import { Image, Text, View } from "@tarojs/components"
import GpBlockTitle from "@/components/GpBlockTitle"
import GpNewsItem from "@/components/GpNewsItem"
import GpJumpNavs from "@/components/GpJumpNavs"
import GpCurrentPort from "@/components/GpCurrentPort"
import GpSimpleTabbar from "@/components/GpSimpleTabbar"
import { getBadgeOrNewsDetail } from "@/apis/index"
import Taro from "@tarojs/taro"
import { pageMapper } from "@/constants/pageMap"
import { commonUrls, makePagePath } from "@/utils/router"
import { setPageMeta } from "@/utils/common"
import GpHtmlRenderer from "@/components/GpHtmlRenderer"
import clsx from "clsx"

const ports = [{ text: "学校招生简章" }]
type IDetail = {
  id: number
  schoolId: number
  title: string
  type: number
  schoolLogo: string
  shoolName: string
  updateTime: string
  content: IHtmlBlockContentable["content"]
  /** for page meta,文章开头前80个字 */
  pureContent: string
}
type IState = {
  detail: INullable<IDetail>
  moreNews: any[]
}
class SchoolBadge extends React.Component<unknown, IState> {
  constructor(props) {
    super(props)
    this.state = {
      detail: null,
      moreNews: []
    }
  }
  onShareAppMessage() {}
  onLoad(options: Recordable) {
    this.getDetailData(options.id)
  }
  componentDidShow() {
    this.setPageInfo(this.state.detail)
  }
  setPageInfo = (detail: INullable<IDetail>) => {
    if (detail) {
      setPageMeta({
        keywords: `${detail.shoolName}艺考资讯`,
        title: `${detail.title}-择艺宝`,
        description: detail.pureContent
      })
    }
  }
  getDetailData = (id: string) => {
    Taro.showLoading()
    getBadgeOrNewsDetail(id)
      .then(res => {
        if (res.data.success) {
          const retData = res.data.data
          const _moreNews = retData.moreNews || []
          _moreNews.forEach(l => {
            l.url = makePagePath(pageMapper.schollBadge, { id: l.id })
          })
          const content = retData.content

          const pureContent = retData.summary
          const detail = {
            id: retData.id,
            schoolId: retData.schoolId,
            title: retData.title,
            type: retData.type,
            schoolLogo: retData.schoolLogo,
            shoolName: retData.shoolName,
            updateTime: retData.updateTime,
            content,
            pureContent
          }
          this.setState({
            moreNews: _moreNews,
            detail
          })
          this.setPageInfo(detail)
        }
      })
      .finally(() => {
        Taro.hideLoading()
      })
  }
  renderContent = () => {
    const detail = this.state.detail as IDetail
    return (
      <View className="bg-hex-fff pt-20px pb-48px px-30px">
        <View className="yahei-bold font-bold text-40px leading-64px text-hex-2c2c35 pb-40px">
          <Text>{detail.title}</Text>
        </View>
        <View className="flex flex-row items-center pb-24px">
          <Image src={detail.schoolLogo} className="w-66px h-66px rounded-1" />
          <View className="yahei-bold font-bold text-30px text-hex-2c2c35 my-16px ml-16px">
            <Text>{detail.shoolName}</Text>
          </View>
          <View className="yahei-bold font-normal text-24px text-hex-b8b8bf ml-auto">
            <Text>{detail.updateTime}</Text>
          </View>
        </View>
        {/* className="yahei font-normal text-28px leading-48px text-hex-2c2c35" */}
        {/* <View className="taro_html" dangerouslySetInnerHTML={{ __html: detail.content }}></View> */}
        {detail.content.blocks && (
          <View className="taro_html">
            <GpHtmlRenderer htmlBlocks={detail.content.blocks} />
          </View>
        )}
      </View>
    )
  }
  renderMoreBadge = () => {
    const { moreNews } = this.state
    const len = moreNews.length
    if (len <= 0) return null
    return (
      <View className="mt-20px pt-30px pb-40px px-30px bg-hex-fff">
        <View className="pb-34px ">
          <GpBlockTitle title="更多简章" showArrow navigatorLink={commonUrls.introBadge} />
        </View>
        <View className=" flex flex-col">
          {moreNews.map((l, index) => {
            return (
              <View
                key={index}
                className={clsx({
                  "mb-28px": index !== len - 1
                })}
              >
                <GpNewsItem text={l.title} time={l.date} navigationLink={l.url} />
              </View>
            )
          })}
        </View>
      </View>
    )
  }
  /** 快捷导航 */
  renderJumpNavs = () => {
    return (
      <View className="mt-20px">
        <GpJumpNavs />
      </View>
    )
  }
  render(): React.ReactNode {
    if (!this.state.detail) return null
    return (
      <GpContainer>
        <View>
          {this.renderContent()}
          {/* 更多简章 */}
          {this.renderMoreBadge()}
          {/* 快捷导航 */}
          {this.renderJumpNavs()}
          {/* 当前位置 */}
          <GpCurrentPort ports={ports} />
        </View>
        {/* 底部导航 */}
        <GpSimpleTabbar />
      </GpContainer>
    )
  }
}
export default SchoolBadge
